<template>
  <div class="category-box">
    <PageLayout type="category">
      <div class="category-main">
        <div class="category-left">
          <div class="weekly-news">
            <div class="weekly-news-inner">
              <div class="weekly-news-title">本周强推</div>
              <div class="weekly-news-split"></div>
              <div class="weekly-news-list">
                <div
                  v-for="(item, idx) in weeklyList"
                  :key="idx"
                  class="weekly-news-item nas tse"
                  @click="toNewsDetail(item)"
                >
                  <div class="weekly-news-item-dot"></div>
                  <div class="weekly-news-item-type">[{{ item.typeItemName }}]</div>
                  <div class="weekly-news-item-title rl1">{{ item.title }}</div>
                </div>
              </div>
            </div>
          </div>

          <div style="height: 20px"></div>

          <div class="news-cat">
            <div class="news-cat-inner">
              <div class="news-cat-title">信息分类</div>
              <div class="weekly-news-split"></div>
              <div class="news-cat-list">
                <div
                  v-for="(item, idx) in newsTypeList"
                  :key="idx"
                  class="news-cat-item nas tse"
                  @click="toCategory(item)"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style="flex: 0 0 20px"></div>

        <div class="category-right">
          <div class="rec-news">
            <div class="rec-news-inner">
              <div class="rec-news-list">
                <div
                  v-for="(item, idx) in categoryNewsList"
                  :key="idx"
                  class="rec-news-item nas tse"
                  @click="toNewsDetail(item)"
                >
                  <div class="rec-news-item-l">
                    <img v-if="item.imgList.length > 0" :src="item.imgList[0]" />
                    <img v-else />
                  </div>

                  <div class="rec-news-item-r">
                    <div class="rec-news-item-r-title rl1" style="width: 211px">
                      {{ item.title }}
                    </div>
                    <div class="rec-news-item-r-subtitle">
                      <div class="rec-news-item-r-subtitle-pic"><img src="@/assets/user.png" /></div>
                      <div class="rec-news-item-r-subtitle-name">{{ item.contactsName }}</div>
                      <div class="rec-news-item-r-subtitle-split"></div>
                      <div class="rec-news-item-r-subtitle-type">{{ item.typeName }}/{{ item.typeItemName }}</div>
                    </div>
                    <div class="rec-news-item-r-desc rl3">
                      <div v-if="item.contentInfo" v-html="item.contentInfo"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div v-if="categoryNewsTotal > categoryNewsPageSize" class="pagging-box">
              <el-pagination
                :page-size="categoryNewsPageSize"
                layout="prev, pager, next"
                :total="categoryNewsTotal"
                @current-change="categoryNewsPageChanged"
              >
              </el-pagination>
            </div>

            <div style="height: 20px"></div>
          </div>
        </div>
      </div>

      <div style="height: 40px"></div>
    </PageLayout>
  </div>
</template>

<script>
import { getCategoryInfo, getCategoryNewsList } from '@/api/api'
import PageLayout from '@/components/pageLayout/index'

export default {
  name: 'category',
  components: {
    PageLayout
  },

  data() {
    return {
      categoryTypeId: 1,
      subCategoryTypeId: '',

      recList: [],
      weeklyList: [],
      newsTypeList: [],

      categoryNewsPageSize: 12,
      categoryNewsPageIndex: 1,
      categoryNewsTotal: 0,
      categoryNewsList: []
    }
  },

  metaInfo() {
    return {
      title: this.$store.state.common.pageTitle,
      meta: [
        { name: 'keywords', content: this.$store.state.common.pageKeywords },
        { name: 'description', content: this.$store.state.common.pageDescription }
      ]
    }
  },

  mounted() {
    if (this.$route.query.type) {
      this.categoryTypeId = this.$route.query.type
    }

    if (this.$route.query.id) {
      this.subCategoryTypeId = this.$route.query.id
    }

    this.__getCategoryInfo()
    this.__getCategoryNewsList()
  },

  methods: {
    async __getCategoryInfo() {
      const res = await getCategoryInfo(this.categoryTypeId)
      if (res && res.code === 200 && res.result) {
        this.recList = res.result.releList || []
        this.formatFileUrls(this.recList)

        this.weeklyList = res.result.weekList || []
        this.formatFileUrls(this.weeklyList)

        this.newsTypeList = res.result.typeList || []
        this.formatFileUrls(this.newsTypeList)
      }
    },

    formatFileUrls(list) {
      if (!list || list.length === 0) {
        return
      }

      list.forEach((element) => {
        if (element.imgList) {
          const tempArr = element.imgList.split(',')
          const tempArr2 = []
          tempArr.forEach((subElement) => {
            tempArr2.push(this.$filePrefixUrl + subElement)
          })
          element.imgList = tempArr2
        } else {
          element.imgList = []
        }
      })
    },

    async __getCategoryNewsList() {
      const res = await getCategoryNewsList({
        pageNo: this.categoryNewsPageIndex,
        pageSize: this.categoryNewsPageSize,
        typeId: this.categoryTypeId || '',
        typeItemId: this.subCategoryTypeId || ''
      })

      if (res && res.code === 200 && res.result) {
        this.categoryNewsTotal = res.result.total
        this.categoryNewsList = res.result.records

        this.formatFileUrls(this.categoryNewsList)
      }
    },

    toNewsDetail(item) {
      this.$router.push('/newsDetail?type=' + item.typeId + '&id=' + item.id)
    },

    toCategory(item) {
      this.$router.push('/category?type=' + item.typeId + '&id=' + item.id)
      this.$store.dispatch('setSubTypeName', item.name)

      setTimeout(() => {
        location.reload()
      }, 200)
    },

    categoryNewsPageChanged(pageIndex) {
      this.categoryNewsPageIndex = pageIndex
      this.__getCategoryNewsList()
    }
  }
}
</script>

<style lang="scss" scoped>
.category-box {
  .category-main {
    width: 1440px;

    display: flex;
    align-items: flex-start;

    .category-left {
      flex: 0 0 auto;
      width: 290px;

      .weekly-news {
        background: #f7f7f7;
        border-radius: 8px;

        .weekly-news-inner {
          padding: 20px;

          .weekly-news-title {
            font-size: 18px;
            padding-bottom: 20px;
          }

          .weekly-news-list {
            overflow-x: hidden;
            overflow-y: auto;

            .weekly-news-item {
              margin-top: 16px;
              margin-bottom: 16px;
              font-size: 14px;

              display: flex;
              align-items: center;

              .weekly-news-item-dot {
                flex: 0 0 auto;

                width: 6px;
                height: 6px;
                background: gray;
                border-radius: 50%;
              }

              .weekly-news-item-type {
                flex: 0 0 auto;

                padding-left: 8px;
                padding-right: 8px;
                color: #7d879f;
              }

              .weekly-news-item-title {
                flex: 1;
              }
            }
          }
        }
      }

      .news-cat {
        background: #f7f7f7;
        border-radius: 8px;

        .news-cat-inner {
          padding: 20px;

          .news-cat-title {
            font-size: 18px;
            padding-bottom: 20px;
          }

          .news-cat-list {
            margin-top: 20px;

            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .news-cat-item {
              margin-bottom: 10px;
              padding-left: 10px;
              padding-right: 12px;
              font-size: 14px;
              margin-right: 10px;
              line-height: 32px;
              border-radius: 2px;
              background: #ffffff;
              border: 1px solid gray;
            }
          }
        }
      }
    }

    .category-right {
      flex: 1;

      .rec-news {
        background: #f7f7f7;
        border-radius: 8px;

        .rec-news-inner {
          padding: 20px;

          flex: 1;

          .rec-news-list {
            flex: 1;

            display: flex;
            flex-wrap: wrap;
            gap: 36px;

            .rec-news-item {
              flex: 0 0 338px;
              margin-bottom: 20px;

              display: flex;

              .rec-news-item-l {
                flex: 0 0 auto;

                width: 127px;
                font-size: 0;

                img {
                  width: 107px;
                  height: 138px;
                  border-radius: 4px;
                }
              }

              .rec-news-item-r {
                flex: 1;

                .rec-news-item-r-title {
                  font-size: 16px;
                }

                .rec-news-item-r-subtitle {
                  margin-top: 10px;

                  display: flex;
                  align-items: center;

                  .rec-news-item-r-subtitle-pic {
                    font-size: 0;

                    img {
                      width: 20px;
                    }
                  }

                  .rec-news-item-r-subtitle-name {
                    font-size: 14px;
                    color: gray;
                  }

                  .rec-news-item-r-subtitle-split {
                    width: 1px;
                    height: 12px;
                    margin-left: 10px;
                    margin-right: 10px;
                    background: #cccccc;
                  }

                  .rec-news-item-r-subtitle-type {
                    font-size: 14px;
                    color: gray;
                  }
                }

                .rec-news-item-r-desc {
                  margin-top: 10px;
                  font-size: 12px;
                  color: gray;
                }
              }
            }
          }
        }
      }
    }
  }

  .weekly-news-split {
    width: 100%;
    height: 1px;
    background: #cccccc;
  }

  .pagging-box {
    text-align: center;

    /deep/ .el-pager li {
      background: transparent !important;
    }

    /deep/ .el-pagination .btn-next {
      background: transparent !important;
    }

    /deep/ .el-pagination .btn-prev {
      background: transparent !important;
    }

    /deep/ .el-pager li.active {
      color: #d87925;
      font-size: 20px;
    }
  }
}
</style>
